<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="司机名称：">
            <el-input
              v-model="page.name"
              placeholder="请输入司机名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="车队：">
            <el-select v-model="page.fleetId" placeholder="请选择">
              <el-option
                v-for="(item, index) in fleet"
                :key="index"
                :label="item.name"
                :value="item.fleetId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="cz">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <br />

    <el-dialog title="编辑车型" :visible.sync="updateTruck">
      <div style="text-align: left">
        <el-form ref="form"  label-width="80px">
          <el-form-item label="*司机名称">
            <el-input
            disabled
              style="margin-right: 50%"
              placeholder="请输入司机名称"
              v-model="updateTurckDriver.pdAuthUser.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="车队：">
            <el-select v-model="updateTurckDriver.fleetId" placeholder="请选择">
              <el-option
                v-for="(item, index) in fleet"
                :key="index"
                :label="item.name"
                :value="item.fleetId+''"
              ></el-option>
            </el-select>
          </el-form-item>
         
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="upqx">取 消</el-button>
        <el-button type="primary" @click="up">确 定</el-button>
      </div>
    </el-dialog>

    <el-card class="box-card">
      <div>
        <el-table
          height="420px"
          :data="tableData"
          @selection-change="handleSelectionChange"
          tooltip-effect="dark"
        >
          <el-table-column prop="id" label="序号" width="120"></el-table-column>
          <el-table-column prop="pdAuthUser.account" label="司机编号"></el-table-column>
          <el-table-column prop="pdAuthUser.name" label="司机姓名"></el-table-column>
          <el-table-column prop="pdAuthUser.mobile" label="司机电话"> </el-table-column>
          <el-table-column prop="pdAuthUser.pdCoreOrg.name" label="所属机构">
          </el-table-column>
          <el-table-column prop="pdFleet.name" label="所属车队">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
                <el-link type="danger" @click="ShowDetails(scope.row)">查看详情</el-link>
              <!-- <el-link slot="reference" type="danger" @click="Del(scope.row.id)">删除</el-link>| -->
              <el-link type="primary" @click="update(scope.row)">编辑车队</el-link>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 7, 10]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  findTruckDriverList,
  ShowPdFleet,
  UpdateFleetByDriver
} from "@/api/wj/Vehicle";
export default {
  data() {
    return {
      tableData: [],
      formInline: {},
      visible:{},
      Truck: {},
      fleet:{},
      updateTruck:false,
      AddTruck: {},
      currentPage4: 4,
      total: 10,
      page:{
        pageindex:1,
        pagenum:5,
        fleetId:"",
        name:""
      },
      updateTurckDriver:{
        pdAuthUser:{}
      },
    };
  },
  methods: {
     handleSizeChange(val) {
      this.page.pagenum = val;
      console.log(`每页 ${val} 条`);
      this.pageinfo();
    },
    handleCurrentChange(val) {
      this.page.pageindex = val;
      console.log(`当前页: ${val}`);
      this.pageinfo();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    onSubmit() {
      this.pageinfo();
    },
    cz() {
      this.page.name="";
      this.page.fleetId="";
    },
    ShowDetails(data) {
        this.$router.push({
        name: "ShowTruckDriver",
        params: { dataForm: JSON.stringify(data) },
      });
      this.$message({
        message: "查看详情",
        type: "success",
      });
    },
      update(u){   
        this.updateTurckDriver=u;
        this.updateTruck=true;
      },
      upqx(){
          this.updateTruck = false;
      },
      up(){
        UpdateFleetByDriver(this.updateTurckDriver).then((data) => {
            if(data.data>0){
                this.$message({
                message: "编辑成功",
                type: "success",
                });
                this.pageinfo();
            }
        });
      this.updateTruck = false;
      },
      pageinfo(){
      findTruckDriverList(this.page).then((data) => {
        this.tableData = data.data.list;
        this.total = data.data.total;
      });
      },
    ShowFleet() {
      ShowPdFleet().then((data) => {
        this.fleet = data.data;
      });
    },
   
  },
   created() {
    this.pageinfo();
    this.ShowFleet();
  },
};
</script>

<style>
/* .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  } */
</style>